import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { AtTextarea } from 'taro-ui'
import './index.scss';

import Api from '@/utils/Api';
import http from '@/utils/http';
import utils from '@/utils/util';
import { get as getGlobalData } from '@/global'
import DrugItem from '@/components/drugItem/index';
import MyModal from '@/components/myModal/index';

let app = Taro.getApp();
class RecyclingSubmit extends Taro.Component {
    constructor(props) {
        super(props);
        this.state = {
            note: '',
            isOpened: false,
            quantity: 0,
            picturesArr: [],
            medicalkitDetails: {}
        }
    }

    componentWillMount() {
        let medicalkitDetails = this.$router.params;
        if (medicalkitDetails.pics) {
            medicalkitDetails.pics = medicalkitDetails.pics.split('|')
        }
        let quantity = medicalkitDetails.quantity - medicalkitDetails.usernum
        this.setState({
            medicalkitDetails,
            quantity
        })
    }
    config = {
        navigationBarTitleText: '回收药品'
    }
    handleChange(e) {
        this.setState({
            note: e.detail.value
        })
    }
    uploadImg() {
        Taro.chooseImage({
            sourceType: ['camera'],
            count: 1
        }).then((d) => {
            let tempFiles = d.tempFiles[0];
            Taro.uploadFile({
                url: process.env.API_URL + Api['fileUpload'],
                filePath: tempFiles.path,
                name: 'file'
            }).then((res) => {
                let { picturesArr } = this.state;
                let data = utils.objparse(res.data);
                if (data) {
                    picturesArr.push(process.env.IMG_URL + data.datas)
                    this.setState({
                        picturesArr
                    })
                } else {
                    utils.showtoast('上传图片出错')
                }
            }).catch(() => { })
        })
    }
    sendMedicalkitRequest() {
        let userInfo = getGlobalData('userInfo') || utils.getUserInfo();
        let { medicalkitDetails, picturesArr, note } = this.state;
        http.get('sendMedicalkitRequest', {
            pics: picturesArr.join('|'),
            loginid: userInfo.loginid,
            // usernum: quantity,
            medicalkitid: medicalkitDetails.rmedicalkits,
            // drugid: medicalkitDetails.drugid,
            mark: note
        }).then(() => {
            utils.showtoast('操作成功', undefined, undefined, true);
            setTimeout(() => {
                Taro.navigateBack({
                    delta: 1
                });
            })
        }).catch(() => {

        })
    }
    cancel() {
        this.refs.Modal.isHide();
        this.setState({ isOpened: false })
    }
    previewImage(picturesArr, item) {
        app.previewImage(picturesArr, item);
    }
    render() {
        const { note, picturesArr, medicalkitDetails, isOpened } = this.state;
        return (
            <View className='pl-2-5 pr-2-5 pt-2-5 recycling-submit'>
                <DrugItem drugItem={medicalkitDetails} isDetails renderSolt={
                    <View className='mt-6-5'>
                        <Text className='ft_w600'>回收信息：</Text>
                        <View className='mt-3-5'>
                            {!isOpened && <AtTextarea
                                value={note}
                                placeholderClass='ft24 ft_B9C'
                                onChange={this.handleChange.bind(this)}
                                maxLength={200}
                                placeholder='请填写备注信息'
                            />}
                        </View>
                        <View className='mt-4'>附件：</View>
                        <View className='pictures-arr flex flex-r mt-3-5' >
                            {
                                picturesArr.map((item) => {
                                    return (
                                        <View className='pictures-arr-item flex bdr_10' key={item}>
                                            <View className='ov-h flex-1 bdr_10' onClick={() => { this.previewImage(picturesArr, item) }}>
                                                <Image src={item} mode='center' className='pictures-box'></Image>
                                            </View>
                                        </View>
                                    )
                                })
                            }
                            {
                                picturesArr.length < 3 ?
                                    <View className='pictures-arr-item flex flex-item-center flex-c bdr_10' onClick={() => { this.uploadImg() }} >
                                        <Image className='camera' src={require('../../../assets/imgs/drug/plus.png')}></Image>
                                        <Text className='mt-2 ft24 fc_999'>添加附件</Text>
                                    </View>
                                    : null
                            }

                        </View>
                        <View onClick={() => { this.refs.Modal.isShow(), this.setState({ isOpened: true }) }} className=' default-btn ft32 fc_FFF text-c mt-11 mb-6' >回收</View>
                    </View>
                }
                ></DrugItem>
                <MyModal ref='Modal'
                    confirm={(event) => this.sendMedicalkitRequest(event)}
                    cancel={(event) => this.cancel(event)}
                    renderSolt={
                        <View className='pb-5 ft26 fc_65C'>
                            <View className='mb-2'>使用药品：{medicalkitDetails.drugname}</View>
                            <View className='mb-2'>原因：{medicalkitDetails.isJxq}</View>
                            <View className='mb-2 word-all'>备注：{note}</View>
                            <View >附件：{picturesArr.length}</View>
                        </View>
                    }
                ></MyModal>
            </View>
        );
    }
}

export default RecyclingSubmit;